<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Throughout 
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20100423

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Excel RangeFinder</title>
<meta name="keywords" content="Google Code, visualisation, visualization, information visualisation, information visualization, InfoVis, data visualisation, data visualization, overview plus detail, overview + detail, overview, scroll, scrollbar" />
<meta name="description" content="Add markers to a vertical scrollbar in HTML to help identify areas of interest in your content that would otherwise be scrolled out of view." />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://visi-scroll.googlecode.com/svn/trunk/js/jquery-1.7.1.min.js">
</script>
<script type="text/javascript" src="http://visi-scroll.googlecode.com/svn/trunk/js/VisiScroll.js">
</script>
<style type="text/css">
@import "slidertron.css";
</style>
<LINK REL="SHORTCUT ICON" HREF="http://www.grvisualisation.50webs.com/favicon.ico"> 
</head>

<div style="background-color:white;">
    <!-- Place this tag where you want the +1 button to render. -->
    <div class="g-plusone" data-annotation="inline" data-width="300"></div>
    
    <!-- Place this tag after the last +1 button tag. -->
    <script type="text/javascript">
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
</div>

<body onload="render();">
<!-- Google Analytics -->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5253719-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<script type="text/javascript">
            
    var render = function(){
        
        var textViewer = new VisiScroll(document.getElementById("someText"));
        var tableViewer = new VisiScroll(document.getElementById("aTable"));
        
    }
    
</script>

<!-- end #header-wrapper -->
<div id="logo">
    <h1>Visi-Scroll </h1>
    <em> &nbsp;by Dr Greg Ross</em>
</div>
<div id="header">
    <div id="menu">
        <ul>
            <li><a href="http://www.grvisualisation.50webs.com/" class="first">Home</a></li>
            <li><a href="infovis.html">InfoVis</a></li>
			<li><a href="excelrangefinder.html">Excel RangeFinder</a></li>
            <li><a href="examples.html">Magic Table</a></li>
            <li><a href="javascript_voronoi.html">Voronoi</a></li>
            <li><a href="javascript_surface_plot.html">3D Surface Plot</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    <!-- end #menu -->
    <div id="search">
        <form method="get" action="http://www.google.com/search">
            <fieldset>
                <input type="text" name="q" id="search-text" size="15" />
                <input style="display:none;" type="checkbox"  name="sitesearch" value="grvisualisation.50webs.com" checked />
            </fieldset>
        </form>
    </div>
    <!-- end #search -->
</div>
<!-- end #header -->
<hr />
<!-- end #logo -->

<div id="page">
    
    <div style="text-align:left; clear:both;" width=100%>
            <img src="images/visiscroll/1-thumb.png" alt="Visi-Scroll on arbitrary content." />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <img src="images/visiscroll/2-thumb.png" alt="Visi-Scroll on a large table." />
        </div>
        <br>
    
    <div id="page-bgtop">
        <div id="content">
            <!-- adsense container -->
            <div>
                <div class="post" style="float: left; width:40%;">
                    <h2 class="title">Visi-Scroll</h2>
                    <div class="entry">
                        <p>
                            Add markers to a vertical scrollbar in HTML to help identify areas of interest in your content that would otherwise be scrolled out of view.
                            <br><br>
                            Works in Firefox, Chrome, Safari and Opera. 
                        </p>
                    </div>
                </div>
                
                <div style="float: right;">
                    <!--adsense code-->
                    <script type="text/javascript"><!--
                    google_ad_client = "pub-5899093360211244";
                    /* 336x280, created 5/19/10 */
                    google_ad_slot = "8698410079";
                    google_ad_width = 336;
                    google_ad_height = 280;
                    //-->
                    </script>
                    <script type="text/javascript"
                    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                    </script>
                    <!--end-->
                </div>
                
                <div style="clear: both;"></div>
            </div>
            <br><br>
            <!-- end adsense container -->
            
            <div class="post">
                <h2 class="title">Visi-Scroll </h2>
                <div class="entry">
                        
                        <div style="height: 200px; width:500px; border-style: solid; border-width: 1px; padding: 18px; background: #eee">
            <div id="someText" style="background: #ccc;">
                
                <span visiScrollMarker="#a00" style="color: #a00;">Some 'marked' text...</span>
                
                
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales sollicitudin suscipit. Vivamus fringilla, libero sed adipiscing pellentesque, neque risus faucibus est, in viverra sapien nibh vitae arcu. Suspendisse molestie metus et nunc convallis elementum. Suspendisse sit amet dui metus, eu egestas enim. Quisque scelerisque nisl placerat tortor lacinia faucibus. Quisque fermentum, dui quis blandit hendrerit, lorem elit dapibus metus, eget vestibulum nulla diam ut tortor. Sed ut nulla eu felis pharetra ornare in eu enim. Cras vitae arcu in elit condimentum elementum. Curabitur laoreet, arcu at blandit ultricies, lacus dolor sagittis felis, et vehicula risus felis at purus. Curabitur fermentum pellentesque purus, vel luctus purus egestas vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget ligula neque.

Phasellus egestas blandit justo, vel ornare quam sollicitudin at. Maecenas nulla massa, viverra vel adipiscing at, scelerisque a elit. Sed cursus sagittis nulla ut aliquet. Praesent non est odio, ac blandit libero. Mauris congue risus vitae est ultrices ullamcorper. Praesent vel ligula ligula, quis gravida nibh. Sed vel ante dui. Aliquam interdum tristique auctor. Aenean metus lorem, porta vitae accumsan eget, scelerisque eget quam. Nam ut enim et lorem aliquet mattis. Ut feugiat fermentum nisi, sit amet adipiscing lacus aliquam non. Fusce rhoncus dignissim bibendum. Donec laoreet dapibus lorem, vitae iaculis arcu semper a. Nunc egestas neque ut purus accumsan eu fringilla nunc lobortis. Maecenas lacinia elit in turpis fermentum accumsan.

Duis dignissim ultricies ornare. Nunc et porttitor est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet nisi velit. Morbi commodo scelerisque pharetra. Maecenas luctus, ipsum et tristique aliquam, dolor velit accumsan elit, sit amet tincidunt nisl velit ut augue. Nulla facilisi. Donec ac magna nec libero mattis scelerisque eget eget turpis. Quisque ullamcorper lorem sit amet enim gravida ac vehicula risus fermentum. Vestibulum gravida volutpat lorem sed commodo. Vestibulum eu elit sapien. Proin feugiat lacus nec elit convallis varius.

Maecenas lectus odio, malesuada et sollicitudin et, iaculis sed lectus. Curabitur nec mauris diam, condimentum bibendum metus. Pellentesque urna dui, pellentesque id fringilla in, dictum non sapien. Cras vel orci nibh, id vehicula metus. Sed pretium aliquet risus, eget faucibus est fermentum sit amet. Nam malesuada enim quis eros auctor scelerisque sit amet a velit. In quis risus vel nunc venenatis interdum.

Sed varius neque enim. Integer molestie tempor lacus non dictum. Aenean sit amet augue eget ipsum porttitor auctor in at purus. Fusce turpis lorem, facilisis at tristique sit amet, pellentesque id libero. Praesent non urna erat, quis pellentesque diam. Sed ipsum urna, tempus et mattis sit amet, ullamcorper vel tellus. Quisque vel justo nisl. Suspendisse eget turpis quam, non suscipit est. Pellentesque bibendum orci vitae lorem placerat eu feugiat lorem suscipit. Duis sapien eros, lobortis a tincidunt vitae, dictum vel lacus. 
                
                
                <span visiScrollMarker="#aa0" style="color: #aa0;">Some more marked text that is otherwise scrolled out of view...</span>
                
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales sollicitudin suscipit. Vivamus fringilla, libero sed adipiscing pellentesque, neque risus faucibus est, in viverra sapien nibh vitae arcu. Suspendisse molestie metus et nunc convallis elementum. Suspendisse sit amet dui metus, eu egestas enim. Quisque scelerisque nisl placerat tortor lacinia faucibus. Quisque fermentum, dui quis blandit hendrerit, lorem elit dapibus metus, eget vestibulum nulla diam ut tortor. Sed ut nulla eu felis pharetra ornare in eu enim. Cras vitae arcu in elit condimentum elementum. Curabitur laoreet, arcu at blandit ultricies, lacus dolor sagittis felis, et vehicula risus felis at purus. Curabitur fermentum pellentesque purus, vel luctus purus egestas vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget ligula neque.

Phasellus egestas blandit justo, vel ornare quam sollicitudin at. Maecenas nulla massa, viverra vel adipiscing at, scelerisque a elit. Sed cursus sagittis nulla ut aliquet. Praesent non est odio, ac blandit libero. Mauris congue risus vitae est ultrices ullamcorper. Praesent vel ligula ligula, quis gravida nibh. Sed vel ante dui. Aliquam interdum tristique auctor. Aenean metus lorem, porta vitae accumsan eget, scelerisque eget quam. Nam ut enim et lorem aliquet mattis. Ut feugiat fermentum nisi, sit amet adipiscing lacus aliquam non. Fusce rhoncus dignissim bibendum. Donec laoreet dapibus lorem, vitae iaculis arcu semper a. Nunc egestas neque ut purus accumsan eu fringilla nunc lobortis. Maecenas lacinia elit in turpis fermentum accumsan.

Duis dignissim ultricies ornare. Nunc et porttitor est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet nisi velit. Morbi commodo scelerisque pharetra. Maecenas luctus, ipsum et tristique aliquam, dolor velit accumsan elit, sit amet tincidunt nisl velit ut augue. Nulla facilisi. Donec ac magna nec libero mattis scelerisque eget eget turpis. Quisque ullamcorper lorem sit amet enim gravida ac vehicula risus fermentum. Vestibulum gravida volutpat lorem sed commodo. Vestibulum eu elit sapien. Proin feugiat lacus nec elit convallis varius.

Maecenas lectus odio, malesuada et sollicitudin et, iaculis sed lectus. Curabitur nec mauris diam, condimentum bibendum metus. Pellentesque urna dui, pellentesque id fringilla in, dictum non sapien. Cras vel orci nibh, id vehicula metus. Sed pretium aliquet risus, eget faucibus est fermentum sit amet. Nam malesuada enim quis eros auctor scelerisque sit amet a velit. In quis risus vel nunc venenatis interdum.

Sed varius neque enim. Integer molestie tempor lacus non dictum. Aenean sit amet augue eget ipsum porttitor auctor in at purus. Fusce turpis lorem, facilisis at tristique sit amet, pellentesque id libero. Praesent non urna erat, quis pellentesque diam. Sed ipsum urna, tempus et mattis sit amet, ullamcorper vel tellus. Quisque vel justo nisl. Suspendisse eget turpis quam, non suscipit est. Pellentesque bibendum orci vitae lorem placerat eu feugiat lorem suscipit. Duis sapien eros, lobortis a tincidunt vitae, dictum vel lacus. 
                
                <div visiScrollMarker="#00a" style="height: 100px; color: #fff; background: #00a;">A marked div...</div>
                
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales sollicitudin suscipit. Vivamus fringilla, libero sed adipiscing pellentesque, neque risus faucibus est, in viverra sapien nibh vitae arcu. Suspendisse molestie metus et nunc convallis elementum. Suspendisse sit amet dui metus, eu egestas enim. Quisque scelerisque nisl placerat tortor lacinia faucibus. Quisque fermentum, dui quis blandit hendrerit, lorem elit dapibus metus, eget vestibulum nulla diam ut tortor. Sed ut nulla eu felis pharetra ornare in eu enim. Cras vitae arcu in elit condimentum elementum. Curabitur laoreet, arcu at blandit ultricies, lacus dolor sagittis felis, et vehicula risus felis at purus. Curabitur fermentum pellentesque purus, vel luctus purus egestas vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eget ligula neque.

Phasellus egestas blandit justo, vel ornare quam sollicitudin at. Maecenas nulla massa, viverra vel adipiscing at, scelerisque a elit. Sed cursus sagittis nulla ut aliquet. Praesent non est odio, ac blandit libero. Mauris congue risus vitae est ultrices ullamcorper. Praesent vel ligula ligula, quis gravida nibh. Sed vel ante dui. Aliquam interdum tristique auctor. Aenean metus lorem, porta vitae accumsan eget, scelerisque eget quam. Nam ut enim et lorem aliquet mattis. Ut feugiat fermentum nisi, sit amet adipiscing lacus aliquam non. Fusce rhoncus dignissim bibendum. Donec laoreet dapibus lorem, vitae iaculis arcu semper a. Nunc egestas neque ut purus accumsan eu fringilla nunc lobortis. Maecenas lacinia elit in turpis fermentum accumsan.

Duis dignissim ultricies ornare. Nunc et porttitor est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet nisi velit. Morbi commodo scelerisque pharetra. Maecenas luctus, ipsum et tristique aliquam, dolor velit accumsan elit, sit amet tincidunt nisl velit ut augue. Nulla facilisi. Donec ac magna nec libero mattis scelerisque eget eget turpis. Quisque ullamcorper lorem sit amet enim gravida ac vehicula risus fermentum. Vestibulum gravida volutpat lorem sed commodo. Vestibulum eu elit sapien. Proin feugiat lacus nec elit convallis varius.

Maecenas lectus odio, malesuada et sollicitudin et, iaculis sed lectus. Curabitur nec mauris diam, condimentum bibendum metus. Pellentesque urna dui, pellentesque id fringilla in, dictum non sapien. Cras vel orci nibh, id vehicula metus. Sed pretium aliquet risus, eget faucibus est fermentum sit amet. Nam malesuada enim quis eros auctor scelerisque sit amet a velit. In quis risus vel nunc venenatis interdum.

Sed varius neque enim. Integer molestie tempor lacus non dictum. Aenean sit amet augue eget ipsum porttitor auctor in at purus. Fusce turpis lorem, facilisis at tristique sit amet, pellentesque id libero. Praesent non urna erat, quis pellentesque diam. Sed ipsum urna, tempus et mattis sit amet, ullamcorper vel tellus. Quisque vel justo nisl. Suspendisse eget turpis quam, non suscipit est. Pellentesque bibendum orci vitae lorem placerat eu feugiat lorem suscipit. Duis sapien eros, lobortis a tincidunt vitae, dictum vel lacus. 
                
                <div visiScrollMarker="#0a0" style="height: 100px; color: #fff; background: #0a0;">Another marked div...</div>
                
                
            </div>
        </div>
        
        <br>
        HTML elements can be 'marked' with a colour and made visible even though they have been scrolled out of sight.
        <br><br><br>
        
        <div style="height: 200px; width:500px; border-style: solid; border-width: 1px; padding: 18px; background: #eee">
            <div id="aTable" style="background: #ccc;">
                
                <table border="1" cellspacing="0">
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td visiScrollMarker="#a00" style="width: 30px; height: 20px; color:#a00">Here!</td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                    <tr>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                        <td style="width: 30px; height: 20px"></td>
                    </tr>
                </table>
                
            </div>
        </div>
        
        <br>
        You can scroll directly to cells of interest in large tables.
        <br><br><br>
          
		 To use Visi-Scroll, your html must be structured as follows in a nested div tag:
        <br><br>
        
        <div class="code">
            <pre>
    &lt;div style="<span class="boldBlue">height</span>: 200px; <span class="boldBlue">width</span>:500px;&gt;
    
        &lt;div id="<span class="boldBlue">someScrolledContent</span>"&gt;
        
            &lt;span <span class="boldBlue">visiScrollMarker="#a00"</span>&gt;'marked' text...&lt;/span&gt;
            
            .
            .
            .
        &lt;/div&gt;
        
    &lt;/div&gt;
            </pre>
        </div>
        
        <p>The outer div must have a width and height specified. These constrain the dimensions of the inner div that contains our scrollable content.</p>
        
        <p>The inner div contains the content that will be scrolled. This div should be allocated an ID that will be used in our JavaScript.</p>
        
        <p>All you need to do to highlight content in the scrollbar is to assign a <span class="boldBlue">visiScrollMarker</span> attribute.
        
        The value should be the desired colour of the marker in the scrollbar. </p>
        <p>One line of JavaScript is required to enable Visi-Scroll on your content:</p>
        
        <br>
        
        <div class="code">
            <pre>
    var render = function(){
        
       var textViewer = 
        new VisiScroll(document.getElementById("<span class="bold">someScrolledContent</span>"));
       
        
    }
            </pre>
        </div>                        

                </div>
                
            </div>
        </div>
        <!-- end #content -->
        <div id="sidebar">
            <ul>
                <li>
                    <h2>Features </h2>
                    <ul>
                        <li class="feature">adds visibility to information</li>
                        <li class="feature">quick access to salient details</li>
                        <li class="feature">instant navigation</li>
                        <li class="feature">pure JavaScript implementation</li>
                    </ul>
                </li>
                <li>
                    <h2>License </h2>
                    <ul>
                        <li><a href="http://www.gnu.org/licenses/gpl.html">GNU General Public License v3</a></li>
                    </ul>
                </li>
                <li>
                    <h2>Downloads and source</h2>
                    <div><a href="https://code.google.com/p/visi-scroll/downloads/list" class="links">Download</a></div>
                    <div><a href="https://code.google.com/p/visi-scroll/source/checkout" class="links">SVN checkout</a></div>
                    <p>
                        I spent a lot of time and effort building Visi-Scroll and it's totally free. It's thirsty work, so if you like it then 
                        I'd appreciate it if you...
                    </p>
                    <div style="text-align:center;">
                        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                            <input type="hidden" name="cmd" value="_s-xclick">
                            <input type="hidden" name="hosted_button_id" value="JZSZZTB8LXNBG">
                            <input type="image" src="http://www.grvisualisation.50webs.com/images/bmab.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
                            <img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
                        </form>
                    </div>
                </li>
                <li>
                    <h2>iPhone Apps </h2>
                    <ul>
                        <li class="feature"><a href="http://caligramsoftware.co.uk/peekaboo">Peekaboo 3D</a></li>
                        <li class="feature"><a href="http://caligramsoftware.co.uk">ClapTrax</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- end #sidebar -->
        <div style="clear: both;">&nbsp;</div>
    </div>
    <!-- end #page -->
</div>
<div id="footer">
    <p>Copyright (c) 2008 Dr Greg Ross. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>
